<template>
  <div class="add_cart">
    <i class="iconfont icon-jian" v-if="amount" @click.stop="removeFood"></i>
    <span v-if="amount">{{ amount }}</span>
    <i class="iconfont icon-jia1" @click.stop="addFood"></i>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  props: {
    foods: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      isShow: false
    };
  },
  computed: {
    ...mapState(['cartList', 'shop_id']),
    // 计算数量
    amount() {
      const shop = this.cartList[this.shop_id];
      const { menu_id, id } = this.foods;
      if (shop && shop[menu_id] && shop[menu_id][id]) {
        let num = 0;
        Object.values(shop[menu_id][id]).forEach(item => {
          num += item.num;
        });
        return num;
      }
      return 0;
    }
  },
  methods: {
    ...mapMutations(['ADD_CART', 'REDUCE_CART']),
    // 增加食品
    addFood() {
      this.ADD_CART(this.foods);
    },
    // 减少
    removeFood() {
      this.REDUCE_CART(this.foods);
    }
  }
};
</script>

<style lang="less" scoped>
.add_cart {
  display: flex;
  align-items: center;
  span {
    margin-top: -2px;
    padding: 0 3px;
  }
}
.iconfont {
  font-size: 22px;
}
.icon-jia {
  color: var(--color-base);
}
</style>
